package myJs.search

import myJs.Implicits.JDJAn
import myJs.MainCp
import myJs.cps.Style
import myJs.myPkg.ReactRouterDOM
import myJs.tool.Tool
import org.scalajs.dom.URLSearchParams
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._
import myJs.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  type Props = Unit

  val curPage = Search

  val component = FunctionalComponent[Props] { props =>

    val (tableRs, setTableRs) = useState(List.empty[ujson.Obj])
    val (circTableRs, setCircTableRs) = useState(List.empty[ujson.Obj])
    val defaultTab = List("mRna", "circRna")(0)
    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val tabP = searchParams.get("tab").null2Empty
    val initTab = if (tabP.isBlank) defaultTab else tabP
    val (tab, setTab) = useState(initTab)

    object FTool {

      def tableRsChange = (v: List[ujson.Obj]) => {
        setTableRs(v)
      }

      def circTableRsChange = (v: List[ujson.Obj]) => {
        setCircTableRs(v)
      }

      def tabChange(curTab: String) = () => {
        setTab(curTab)
      }

    }

    val mCls = if (tab == "mRna") "active" else ""
    val circCls = if (tab == "circRna") "active" else ""

    MainCp(title = curPage.titleStr)(
      div(className := "panel panel-default",
        div(className := "panel-heading",
          h3(className := "panel-title",
            curPage.titleStr
          )
        ),
        div(className := "panel-body",
          div(
            div(className := "row",
              div(className := "col-sm-3",
                div(className := "bs-docs-sidebar",
                  ul(className := "nav bs-docs-sidenav",
                    li(style := Style(width = "100%"), className := mCls,
                      a(href := "#mRna", data - "toggle" := "tab", onClick := FTool.tabChange("mRna"), "mRNA and lncRNA")
                    ),
                    li(style := Style(width = "100%"), className := circCls,
                      a(href := "#circRna", data - "toggle" := "tab", onClick := FTool.tabChange("circRna"), "circRNA")
                    )
                  )
                )
              ),
              div(className := "col-sm-8 tab-content myform",
                div(className := s"tab-pane ${mCls}", id := "mRna",
                  FormCp(tableRsChange = FTool.tableRsChange)
                ),
                div(className := s"tab-pane ${circCls}", id := "circRna",
                  CircFormCp(tableRsChange = FTool.circTableRsChange)
                )
              )
            ),
            div(className := "row",
              div(className := "col-sm-12",
                hr(),
                h4("Search Results:"),
                div(style := Style(display = Tool.b2Display(tab == "mRna")),
                  TableCp(tableRs = tableRs)
                ),
                div(style := Style(display = Tool.b2Display(tab == "circRna")),
                  CircTableCp(tableRs = circTableRs)
                ),


              )
            )
          )
        )
      )

    )

  }

  object STool {


  }

}
